<template>
  <div class="data-table">
    <div v-if="this.tableName != null" class="table-name"># {{this.tableName}}</div>
    <table>
      <thead>
      <tr>
        <th v-for="(val, col, idx) in this.columns" @mouseover="addIsVisible = true" @mouseleave="addIsVisible = false">
          {{val}}
          <span v-if="addIsVisible && idx === 0" class="tree-node-add" @click="addRow" style="float: right; margin-right: 10px">+</span>
        </th>
      </tr>
      </thead>
      <tr v-for="row in tabData">
        <td v-for="(val, col) in row">
          <input type="text" v-bind:value="val" :readonly="readonly">
        </td>
      </tr>
    </table>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
  export default {
    name: "data-table",
    props: {
      tableName: String | null,
      columns: Map | Array,
      data: Array,
      readonly: Boolean
    },
    data() {
      return {
        addIsVisible: false,
        tabData: [],
        canAppendRow: true
      }
    },
    created() {
      this.tabData = this.data;
    },
    methods: {
      addRow: function () {
        if (this.canAppendRow) {
          let row = {};
          for (let col in this.columns) {
            console.log(col);
            row[col] = ''
          }
          this.tabData.push(row)
          this.canAppendRow = !this.canAppendRow
        }
      }
    }
  }
</script>
<style scoped>
  .data-table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 15px;
  }

  .table-name {
    padding: 8px;
    font-size: 22px;
    font-weight: bold;
    color: lightsteelblue;
    font-family: Consolas;
  }

  .data-table table {
    border-collapse: collapse;
    display: table;
    width: 100%;
    text-align: left;
    border-spacing: 2px;
    border-color: grey;
  }

  .data-table table thead {
    background-color: #F3F3F5;
  }

  th {
    height: 40px;
    padding-left: 10px;
    border: solid 1px #ddd;
    user-select: none;
  }

  td {
    height: 40px;
    padding-left: 10px;
    border: solid 1px #ddd;
  }

  input {
    border: none;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 16px;
  }
</style>
